<script setup lang="ts">
import { PlusOutlined } from '@ant-design/icons-vue'
import {useTable} from "~/composables/table.ts";
import {useForm} from "~/composables/form.ts";

interface CrudTableModel{
  id: string
  name: string
  value: string
  remark?: string
}
const apiPrefix = "crud"
const columns = shallowRef([
  {
    title: '名',
    dataIndex: 'name',
  },
  {
    title: '值',
    dataIndex: 'value',
  },
  {
    title: '描述',
    dataIndex: 'remark',
  },
  {
    title: '操作',
    dataIndex: 'action',
  },
])

const { state, initQuery, query } = useTable({
  apiPrefix,
  searchColumn:["name"],
  afterQuery: (res) => {
    console.log(res)
    return res
  },
})

const {formState,handleOk,handleCancel,handleAdd,handleEdit,handleDelete} = useForm({
  apiPrefix,
  query,
})

</script>

<template>
  <page-container>
    <a-card>
      <template #extra>
        <a-space size="large">
          <a-button type="primary" @click="handleAdd">
            <template #icon>
              <PlusOutlined />
            </template>
            新增
          </a-button>
          <a-input-search
              v-model:value="state.searchKeyWorld"
              placeholder="输入搜索关键词"
              enter-button
              @search="initQuery"
          />
        </a-space>
      </template>
      <a-table
        row-key="id" :row-selection="state.rowSelections" :loading="state.loading" :columns="columns"
        :data-source="state.dataSource" :pagination="state.pagination"
      >
        <template #bodyCell="scope">
          <template v-if="scope?.column?.dataIndex === 'action'">
            <div flex gap-2>
              <a-button type="link" @click="handleEdit(scope?.record as CrudTableModel)">
                编辑
              </a-button>
              <a-popconfirm
                title="确定删除该条数据？" ok-text="确定" cancel-text="取消"
                @confirm="handleDelete(scope?.record as CrudTableModel)"
              >
                <a-button type="link">
                  删除
                </a-button>
              </a-popconfirm>
            </div>
          </template>
        </template>
      </a-table>
    </a-card>

    <a-modal v-model:open="formState.formVisible" :title="formState.isUpdate?'编辑':'新增'" @ok="handleOk" @cancel="handleCancel">
      <a-form ref="formRef" :model="formState.formData" class="w-full" :label-col="{ style: { width: '100px' } }" :wrapper-col="{ span: 24 }">
        <a-form-item name="name" label="名" :rules="[{ required: true, message: '请输入名' }]">
          <a-input v-model:value="formState.formData.name" :maxlength="50" placeholder="请输入名" />
        </a-form-item>
        <a-form-item name="value" label="值" :rules="[{ required: true, message: '请输入值' }]">
          <a-input v-model:value="formState.formData.value" :maxlength="50" placeholder="请输入值" />
        </a-form-item>
        <a-form-item name="remark" label="备注">
          <a-textarea v-model:value="formState.formData.remark" show-count :maxlength="200" placeholder="请输入备注" />
        </a-form-item>
      </a-form>
    </a-modal>
  </page-container>
</template>

<style lang="less" scoped>

</style>
